<template>
  <div :class="Bem()">
    <NewImage :images="showImage" @click="$emit('view')" />
    <el-link
      v-if="active"
      :disabled="disabled"
      :underline="false"
      @click="visible = true"
    >
      上传
    </el-link>
    <SxTableImageEdit
      v-if="visible"
      :limit="limit"
      :visible.sync="visible"
      :file-list="imageList"
      @save="handleImageSave"
    />
  </div>
</template>

<script>
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../config'
import NewImage from '@Components/Table/components/NewImage'
import SxTableImageEdit from './SxTableImageEdit'
import { ImgUrlFilter } from '@Components/assets/js/filter'
export default {
  components: {
    NewImage,
    SxTableImageEdit
  },
  props: {
    images: {
      type: Array,
      default: () => []
    },
    limit: {
      type: Number,
      default: 5
    },
    disabled: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    showImage() {
      return this.images.map(i => ImgUrlFilter(i))
    },
    imageList() {
      return this.images.map(i => ({
        id: new Date().getTime() + i,
        filePath: i
      }))
    }
  },
  methods: {
    Bem: createBem(`${tableNamespace}__image-upload`),
    handleImageSave(imageList) {
      this.$emit(
        'save',
        imageList.map(i => i.filePath)
      )
    }
  }
}
</script>

<style scoped lang="scss">
@import '../variables.scss';

.#{$TableNameSpace} {
  &__image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    .el-link {
      margin-left: 3px;
      font-size: 12px;
    }
  }
}
</style>
